var thisVue = new Vue({
    el:"#TheDiv",
    data:{
        //区域1数据对象
        webSoketHandle:NaN,
        region_1:{
            gateStatus: false,
            elementPoint_gate_open: null,
            elementPoint_gate_close: null,
            feedPoint:[
                {
                    id: 1,
                    elementPoint_Tag: null,
                    des: "石灰石",
                    left: "0px",
                    top: "0px"
                }
            ],
            screen: [
                {
                    id: 1,
                    elementPoint_Tag: null,
                    text: "大屏1",
                    left: "0px",
                    top: "0px"
                }
            ]
        },

        //区域2数据对象
        region_2:{
            gateStatus: false,
            elementPoint_gate_open: null,
            elementPoint_gate_close: null,
            feedPoint:[
                {
                    id: 1,
                    elementPoint_Tag: null,
                    des: "石灰石",
                    left: "0px",
                    top: "0px"
                }
            ],
            screen: [
                {
                    id: 1,
                    elementPoint_Tag: null,
                    text: "大屏1",
                    left: "0px",
                    top: "0px"
                }
            ]
        },

        //区域3数据对象
        region_3:{
            gateStatus: false,
            elementPoint_gate_open: null,
            elementPoint_gate_close: null,
            feedPoint:[
                {
                    id: 1,
                    elementPoint_Tag: null,
                    des: "石灰石",
                    left: "0px",
                    top: "0px"
                }
            ],
            screen: [
                {
                    id: 1,
                    elementPoint_Tag: null,
                    text: "大屏1",
                    left: "0px",
                    top: "0px"
                }
            ]
        },
    },
    methods:{
        test:function(){
            console.log(this.region_1.feedPoint.elementPoint_Tag.style.left)
        },
        getPortInfo:function(text,thisVuew){
            that = thisVuew;
            axios.get(text)
                .then(function(response){
                    let data = response.data;
                    //let thatt = that;
                    try{
                        that.region_1.feedPoint.splice(0,that.region_1.feedPoint.length);
                        that.region_2.feedPoint.splice(0,that.region_2.feedPoint.length);
                        that.region_3.feedPoint.splice(0,that.region_3.feedPoint.length);
                        data.forEach(function (item,index){
                            switch (item.area){
                                case "A区":
                                    that.region_1.feedPoint.push(item);
                                    break;
                                case "B区":
                                    that.region_2.feedPoint.push(item);
                                    break;
                                case "C区":
                                    that.region_3.feedPoint.push(item);
                                    break;
                            }
                        })
                    }catch (e){
                        console.log(e)
                    }
                })
                .catch(function(err){
                    console.log(err)
                })
        },
        getScreenInfo:function(text,thisVuew){
            that = thisVuew;
            axios.get(text)
                .then(function(response){
                    let data = response.data;

                    try{
                        that.region_1.screen.splice(0,that.region_1.screen.length);
                        that.region_2.screen.splice(0,that.region_2.screen.length);
                        that.region_3.screen.splice(0,that.region_3.screen.length);
                        data.forEach(function (item,index){
                            switch (item.area){
                                case "A区":
                                    that.region_1.screen.push(item);
                                    break;
                                case "B区":
                                    that.region_2.screen.push(item);
                                    break;
                                case "C区":
                                    that.region_3.screen.push(item);
                                    break;
                            }
                        })
                    }catch (e){
                        console.log(e)
                    }
                })
                .catch(function(err){
                    console.log(err)
                })
        },
        webSocketFun:function(JSONData){
            switch (JSONData.code){
                case "screenMessage":
                    let List = this.region_1.screen
                    for(let item of List){
                        if(item.id === JSONData.data.id){
                            item.text = JSONData.data.text;
                        }
                    }
                    List = this.region_2.screen
                    for(let item of List){
                        if(item.id === JSONData.data.id){
                            item.text = JSONData.data.text;
                        }
                    }
                    List = this.region_3.screen
                    for(let item of List){
                        if(item.id === JSONData.data.id){
                            item.text = JSONData.data.text;
                        }
                    }
                    break;
            }
        }
    },
    beforeMount:function (){
        //
    },
    mounted:function(){

        this.getPortInfo("http://localhost:9001/boot/guide/page/initpageinfofeedport",this);
        this.getScreenInfo("http://localhost:9001/boot/guide/page/initpageinfoscreen",this);

        //console.log(this)
        //console.log(window.location.host);
        thisBody = document.getElementById("TheBody");
        thisDiv = document.getElementById("TheDiv");
        thisBodyParent = thisBody.parentElement;
        //console.log(thisDocument.parentElement);
        scaleX = thisBody.clientWidth / 1920;
        thisDiv.style.transform = "scale("+ scaleX +")";
        // leftX = -(thisBodyParent.scrollWidth - thisBody.clientWidth);
        // topY = -(thisBodyParent.scrollTop - thisBody.clientTop);
        leftX = -1920/2*(1-scaleX);
        topY  = -1080/2*(1-scaleX);
        thisDiv.style.left = leftX+"px";
        thisDiv.style.top = topY+"px";
        //console.log(thisBodyParent)
        // console.log(thisBodyParent.clientWidth)
        // console.log(thisBodyParent.scrollWidth)
        //scaleX = 1920 / thisBodyParent.scrollWidth;
        //thisBody.style.transform = "scale("+ scaleX +")";

        //区域道闸数据初始化
        this.region_1.elementPoint_gate_open = document.getElementById("region_1_Gate_open");
        this.region_1.elementPoint_gate_close = document.getElementById("region_1_Gate_close");
        if(this.region_1.gateStatus){
            this.region_1.elementPoint_gate_open.style.backgroundColor = "rgb(14, 148, 235, 1)";
            this.region_1.elementPoint_gate_close.style.backgroundColor = "rgb(14, 148, 235, 0)";
        }
        else{
            this.region_1.elementPoint_gate_open.style.backgroundColor = "rgb(14, 148, 235, 0)";
            this.region_1.elementPoint_gate_close.style.backgroundColor = "rgb(14, 148, 235, 1)";
        }

        this.region_2.elementPoint_gate_open = document.getElementById("region_2_Gate_open");
        this.region_2.elementPoint_gate_close = document.getElementById("region_2_Gate_close");
        if(this.region_2.gateStatus){
            this.region_2.elementPoint_gate_open.style.backgroundColor = "rgb(14, 148, 235, 1)";
            this.region_2.elementPoint_gate_close.style.backgroundColor = "rgb(14, 148, 235, 0)";
        }
        else{
            this.region_2.elementPoint_gate_open.style.backgroundColor = "rgb(14, 148, 235, 0)";
            this.region_2.elementPoint_gate_close.style.backgroundColor = "rgb(14, 148, 235, 1)";
        }

        this.region_3.elementPoint_gate_open = document.getElementById("region_3_Gate_open");
        this.region_3.elementPoint_gate_close = document.getElementById("region_3_Gate_close");
        if(this.region_3.gateStatus){
            this.region_3.elementPoint_gate_open.style.backgroundColor = "rgb(14, 148, 235, 1)";
            this.region_3.elementPoint_gate_close.style.backgroundColor = "rgb(14, 148, 235, 0)";
        }
        else{
            this.region_3.elementPoint_gate_open.style.backgroundColor = "rgb(14, 148, 235, 0)";
            this.region_3.elementPoint_gate_close.style.backgroundColor = "rgb(14, 148, 235, 1)";
        }

        //定时任务代码参考
        //this.timer = setInterval(()=>{this.getCarInfo("GetCarInfo",thisVue);},2000);
        if('WebSocket' in window){
            this.webSoketHandle = new WebSocket("ws://localhost:9001/boot/websocket/testname");

            this.webSoketHandle.onopen = function(){
                console.log("连接成功");
            }

            this.webSoketHandle.onmessage = function (event){
                //console.log(event.data);
                let JSONData = JSON.parse(event.data);
                //console.log(JSONData);
                thisVue.webSocketFun(JSONData);
            }

            this.webSoketHandle.onerror = function(){
                console.log("连接出错");
            }

            this.webSoketHandle.onclose = function(){
                console.log("退出连接");
            }
        }
    },
    updated:function(){
        //区域料口初始化
        let List = this.region_1.feedPoint
        let index = 0;
        for(let item of List){
            item.elementPoint_Tag = document.getElementById("region_1_FeedBox_"+item.id);
            item.elementPoint_Tag.style.top = (20+index*62)+"px";
            index++;
        }

        List = this.region_2.feedPoint
        index = 0;
        for(let item of List){
            item.elementPoint_Tag = document.getElementById("region_2_FeedBox_"+item.id);
            item.elementPoint_Tag.style.left = (10+index*52)+"px";
            index++;
        }

        List = this.region_3.feedPoint
        index = 0;
        for(let item of List){
            item.elementPoint_Tag = document.getElementById("region_3_FeedBox_"+item.id);
            item.elementPoint_Tag.style.left = (100+index*122)+"px";
            index++;
        }

        //区域屏幕初始化
        List = this.region_1.screen
        index = 0;
        for(let item of List){
            item.elementPoint_Tag = document.getElementById("region_1_screen_"+item.id);
            item.elementPoint_Tag.style.top = (69+index*150)+"px";
            index++;
        }

        List = this.region_2.screen
        index = 0;
        for(let item of List){
            item.elementPoint_Tag = document.getElementById("region_2_screen_"+item.id);
            item.elementPoint_Tag.style.left = (69+index*150)+"px";
            index++;
        }

        List = this.region_3.screen
        index = 0;
        for(let item of List){
            item.elementPoint_Tag = document.getElementById("region_3_screen_"+item.id);
            item.elementPoint_Tag.style.left = (144+index*200)+"px";
            index++;
        }
    }
})